<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="cameristList"
      border
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" align="center" width="55"> </el-table-column>
      <el-table-column prop="cameristName" align="center" label="姓名" sortable width="150">
      </el-table-column>
      <el-table-column prop="gender" align="center" label="性别" width="80">
      </el-table-column>
      <el-table-column prop="age" align="center" label="年龄" sortable width="100">
      </el-table-column>
      <el-table-column prop="level" align="center" label="等级" sortable width="200">
        <template slot-scope="scope">
          <el-rate
            disabled
            :texts="texts"
            v-model="scope.row.level"
            show-text
            >
          </el-rate>
        </template>
      </el-table-column>
      <el-table-column width="200" align="center" label="图片">
        <template slot-scope="scope">
          <!-- <img style="width: 120px; height: 120px" :src="scope.row.bannerUrl"> -->
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.avatar"
            :preview-src-list="previewSrcList"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="申请状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isPass === 1" type="success">成功</el-tag>
          <el-tag v-if="scope.row.isPass === 0" type="error">驳回</el-tag>
          <el-tag v-if="scope.row.isPass === 2" type="info">待审核</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="phone" align="center" label="电话" width="150">
      </el-table-column>
      <el-table-column prop="email" align="center" label="邮箱" width="200">
      </el-table-column>
      <el-table-column align="center" label="注册日期" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
          {{ scope.row.gmtCreate }}</template
        >
      </el-table-column>
      <el-table-column align="center" label="操作" width="150" fixed="right">
        <template slot-scope="scope" align="center">
          <el-button
            width="70"
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row.cameristId)"
            >删除</el-button
          >
          <el-button
            v-if="scope.row.isPass === 1 || scope.row.isPass === 0"
            width="70"
            size="mini"
            type="primary"
            @click="showInfo(scope.row)"
            >查看</el-button
          >
          <el-button
            v-if="scope.row.isPass === 2"
            width="70"
            size="mini"
            type="info"
            @click="showInfo(scope.row)"
            >审批</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="deleteSelect()">删除选中</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
    <el-pagination
      :current-page="current"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center"
      layout="total, prev, pager, next, jumper"
      @current-change="getCameristPage"
    />
  </div>
</template>

<script>
import camerist from "@/api/camerist";


export default {
  data() {
    return {
      cameristList: [],
      cameristQuery: {},
      ids: [],
      previewSrcList: [],
      current: 1, //页码
      limit: 4, //每页多少行
      total: 0 ,//总记录数,
      multipleSelection: [],
      texts: ['英勇黄铜', '不屈白银', '荣耀黄金', '华贵铂金', '璀琛钻石']
    };
  },
  created() {
    this.getCameristPage();
  },
  methods: {
    // 分页获取所有摄影师
    getCameristPage(current = 1) {
      this.current = current
      camerist.getCameristPageVo(this.current, this.limit).then( res => {
        console.log(res.data.cameristList)
        this.previewSrcList = []
        this.cameristList = res.data.cameristList;
        this.total = res.data.total;
        this.cameristList.forEach((camerist) => {
        this.previewSrcList.push(camerist.avatar)
        })
      })
    },

    // getBannerPageQuery(current = 1) {
    //   this.current = current
    //   console.log(this.bannerQuery)
    //   banner.getBannerPageQueryVo(this.current, this.limit, this.bannerQuery).then(res => {
    //       this.previewSrcList = []
    //       this.bannerList = res.data.bannerList;
    //       this.total = res.data.total;
    //       this.bannerList.forEach((banner) => {
    //       this.previewSrcList.push(banner.bannerUrl)
    //     })
    //   });
    // },
    // // 获取所有轮播图
    // getAll() {
    //   banner.getAllBanner().then((res) => {
    //     console.log(res.data);
    //     this.previewSrcList = []
    //     this.bannerList = res.data.bannerList
    //   });
    // },
    // 反选和取消
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    // 批量删除
    deleteSelect() {
      this.$confirm("此操作将永久删除这些摄影师, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          banner.deleteAllSelect(this.ids).then((res) => {
            if (res.success) {
              this.getBannerPageQuery();
              this.$message({
                message: "删除成功",
                type: "success",
              });
            } else {
              this.$message({
                message: "出现故障,请稍后",
                type: "failure",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    formatter(row, column) {
      return row.address;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.ids = val;
    },

    // // 跳转编辑或添加页面
    showInfo(row) {
      this.$router.push({ path: "/camerist/apply", query: { camerist: JSON.stringify(row) } });
    },

    // 删除单个
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该摄影师, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          banner.deleteOneById(row).then((res) => {
            if (res.success) {
              // this.getBannerPageQuery();
              this.$message({
                message: "删除成功",
                type: "success",
              });
            } else {
              this.$message({
                message: "出现故障,请稍后",
                type: "failure",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // handleSearch(scope) {
    //   this.bannerQuery.bannerName = this.bannerName
    //   if (this.bannerName.length > 0) {
    //     this.getBannerPageQuery()
    //   } else {
    //     this.getBannerPage();
    //     this.$message({
    //       message: "您的搜索为空,搜索全部内容",
    //       type: "info",
    //     });
    //   }
    //   this.bannerName = ''
    //   // this.bannerQuery.bannerName = ''
    // },
  }
}
</script>

<style>
el-table-column {
  align: center
}
</style>
